<template>
	<el-container class="inp-specimen-list-container">
		<el-main class="inp-specimen-list">
			<el-tabs tab-position="left" type="border-card">
				<el-tab-pane label="全部"></el-tab-pane>
				<el-tab-pane label="待录入"></el-tab-pane>
				<el-tab-pane label="待签名"></el-tab-pane>
				<el-tab-pane label="未审核"></el-tab-pane>
				<el-tab-pane label="已审核"></el-tab-pane>
			</el-tabs>
			<el-main class="inp-specimen-list-main" style="padding: 10px 0 0">
				<div style="width: 100%">
					<MkForm :col="2" formId="checkSpecimen">
						<MkSelect label="" v-model="form.searchType" placeholder="检索类型" :options="searchTypeOptions"
							labelWidth="54px" />
						<MkInput label="" v-model="form.searchValue" placeholder="请输入搜索内容" isEdit labelWidth="24px" />
					</MkForm>
				</div>
				<MkForm class="inp-specimen-list-search" :col="2" formId="checkSpecimen">
					<el-button type="primary" @click="handleOpenSelfCodeEnterDialog">录入自编号</el-button>
					<el-button type="primary" @click="automaticReview">开启自动审核</el-button>
					<MkButtonQuery @click="handleQuery" />
				</MkForm>
				<MkTable :data="tableData" height="100%">
					<MkColumnIndex />
					<MkColumn type="selection" width="40" />
					<MkColumnExpand :contents="inpSpecimenExpand" />
					<MkColumn label="自编号" prop="specimenNo" />
					<MkColumn label="样本号" prop="sampleNo" />
					<MkColumn label="套餐名称" prop="packageName" />
					<MkColumn label="姓名" prop="patientName" />
					<!-- 写在详细信息列表 -->
					<!-- <MkColumn label="年龄" prop="age" /> -->
					<!-- <MkColumn label="科室" prop="departmentName" /> -->
					<!-- <MkColumn label="自动审核信息" prop="autoAuditInfo" /> -->
				</MkTable>
			</el-main>
		</el-main>
		<el-footer class="inp-specimen-list-total">
			<el-radio-group v-model="form.inpType" label="仪器审核" size="small">
				<el-radio-button label="全部" :value="0" />
				<el-radio-button label="已退回" :value="1" />
				<el-radio-button label="待检验" :value="2" />
				<el-radio-button label="已检验" :value="3" />
			</el-radio-group>
			<div>
				总数: {{ total.all }}， 待签名: {{ total.checked }}， 未审核: {{ total.unchecked }}， 已审核:
				{{ total.checkedAndAudited }}
			</div>
			<div>
				已退回: {{ instrumentTotal.passed }}， 待检验: {{ instrumentTotal.unpassed }}，已检验:
				{{ instrumentTotal.checking }}
			</div>
		</el-footer>

		<InpSpecimentListDialog ref="selfCodeEnterDialogRef"></InpSpecimentListDialog>
		<el-dialog v-model="mk.showDialog" draggable :close-on-click-modal="false" :close-on-press-escape="false"
			:show-close="false" width="500">
			<template #header>
				<div style="display: none;"></div>
			</template>
			<div style="display: flex;flex-direction: column;justify-content: flex-start;">
				<div style="font-size: 25px;height: 40px;color: #949495;">自动审核中</div>
				<div style="font-size: 18px;color: #949495;">标本总数：69</div>
				<div style="font-size: 18px;color: #949495;">审核成功：0</div>
				<div style="font-size: 18px;color: #949495;">审核失败：0</div>
				<div style="padding-top: 10px;">
					<el-button style="height: 30px;" type="primary" @click="offAutomaticReview">结束自动审核</el-button>
				</div>
			</div>
		</el-dialog>
	</el-container>
</template>
<script lang="ts" setup>
import { Search, Star } from '@element-plus/icons-vue';
import InpSpecimentListDialog from './InpSpecimentListDialog.vue'
const form = ref({
	searchType: undefined,
	searchValue: '',
	patientType: 0,
	inpType: 0,
});
const total = ref({
	all: 170,
	checked: 170,
	unchecked: 8,
	checkedAndAudited: 162,
});
const instrumentTotal = ref({
	all: 170,
	passed: 162,
	unpassed: 8,
	checking: 0,
	unchecked: 0,
});
const mk = reactive({
	showDialog: false
});
const inpSpecimenExpand = [{ label: '年龄', prop: 'age' }, { label: '科室', prop: 'departmentName' }, { label: '自动审核信息', prop: 'autoAuditInfo' }];
const selfCodeEnterDialogRef = ref<InstanceType<typeof InpSpecimentListDialog> | null>(null);//自编号录入弹框
/**
 * 列表数据
 */
const tableData = ref<any>([]);
/**
 * 点击查询按钮
 */
const handleQuery = () => {
	for (let i = 0; i < 100; i++) {
		tableData.value.push({
			specimenNo: 'INP2500' + Math.floor(Math.random() * 10000) + i,
			sampleNo: '2500' + Math.floor(Math.random() * 10000),
			packageName: '套餐名称' + Math.floor((Math.random() * 10000) / 7),
			patientName: '测试' + i,
			age: 16 + i,
			departmentName: '科室' + i,
			autoAuditInfo: '自动审核信息' + Math.floor(Math.random() * 10000),
		});
	}
};
/**
 * 点击录入自编号按钮
 */
const handleOpenSelfCodeEnterDialog = () => {
	console.log("按钮被点击", selfCodeEnterDialogRef.value); // 先调试
	selfCodeEnterDialogRef.value?.open();
};

// 自动审核
const automaticReview = () => {
	mk.showDialog = true
	document.title = '自动审核中...'
}
// 结束自动审核
const offAutomaticReview = () => {
	mk.showDialog = false
	document.title = '标本检测-测试医院'
}
const searchTypeOptions = [{ label: '样本号', value: 1 }];
defineOptions({
	name: 'InpSpecimenList',
});
</script>
<style lang="scss" scoped>
.inp-specimen-list-container {
	background-color: #fff;

	.inp-specimen-list {
		padding: 0;
		display: flex;

		:deep(.el-tabs__header),
		:deep(.el-tabs__nav-wrap),
		:deep(.el-tabs__nav) {
			width: 30px;
		}

		:deep(.el-tabs__nav-wrap) {
			margin: 0;
		}

		:deep(.is-active) {
			font-weight: bold;
		}

		:deep(.el-tabs__item) {
			padding: 6px 4px;
			text-align: center;
			text-wrap: auto;
			height: auto;
			border-bottom: 1px solid #d1dbe5;
		}

		:deep(.el-main) {
			flex-basis: 0;
		}

		.inp-specimen-list-main {
			flex: 1;
			display: flex;
			flex-direction: column;

			.inp-specimen-list-search {
				display: flex;

				:deep(.el-form-item),
				.el-form-item {
					margin: 0 5px 5px !important;
				}
			}
		}
	}

	.inp-specimen-list-total {
		height: auto;
		display: flex;
		flex-direction: column;

		&>div {
			margin-bottom: 0.2rem;
		}
	}
}

:deep(.el-tabs__content) {
	padding: 0;
	width: 0;
}

:deep(.el-dialog.is-draggable .el-dialog__header) {
	display: none;

}

:deep(.el-overlay .el-overlay-dialog .el-dialog .el-dialog__body) {
	padding: 0px !important;
	padding-left: 20px !important;
}


:deep(.el-tabs__header) {
	margin: 0 !important;
}

:deep(.el-tabs__item) {
	padding-right: 0;
}

:deep(.el-form--inline .el-form-item) {
	margin: 0 5px 20px !important;
}

:deep(.mb20) {
	margin: 10px 0 !important;
}
</style>
